<template>
  <div class="login-container">
    <!-- <van-nav-bar
      style="background-color: #fff;"
      title="忘记密码"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <div class="main-box">
      <van-form @failed="onFailed" @submit="onSubmit">
        <div class="person-info">
          个人信息
        </div>
        <div class="info-box">
          <van-cell-group>
            <van-field
              v-model="userName"
              required
              clearable
              label="姓名："
              placeholder="请输入姓名"
              :rules="[{ pattern:pattern11, message: '请输入的姓名' }]"
            />
            <van-field
              v-model="idCard"
              clearable
              required
              label="身份证号："
              placeholder="请输入身份证号"
              :rules="[{ validator: validatorIdCard, message: '请填写正确的身份证号' }]"
            />
            <van-field
              v-model="fieldValue"
              clearable
              required
              is-link
              label="区域："
              placeholder="请选择区域"
              @click="show = true"
              :rules="[{ required: true, message: '请选择区域' }]"
            />
            <van-field
              v-model="phone"
              clearable
              required
              type="tel"
              label="手机号："
              placeholder="请输入手机号"
              maxlength="11"
              :rules="[{ validator: validatorPhone, message: '请填写正确的手机号' }]"
            />
            <van-field
              v-model="bankAccount"
              clearable
              required
              label="银行卡号："
              placeholder="请输入银行卡号"
              :rules="[{ required: true, message: '请填写正确的银行卡号' }]"
            />
          </van-cell-group>
        </div>
        <div class="password-set">
          新设密码
        </div>
        <div class="password-box">
          <van-cell-group>
            <van-field
              v-model="password"
              type="password"
              clearable
              required
              label="输入密码："
              placeholder="请输入密码"
              :rules="[{ validator: validatorPassword, message: '密码采用8位以上且大小写字符数字和特殊字符搭配的方式' }]"
            />
            <van-field
              v-model="passwordSure"
              type="password"
              clearable
              required
              label="确认密码："
              placeholder="请再次输入密码"
              :rules="[{ validator: ValidatorPasswordSure, message: '密码需与前一次输入相同' }]"
            />
          </van-cell-group>
        </div>
        <div class="btn-box">
          <van-button style="width: 96%;" type="info" native-type="submit">提 交</van-button>
        </div>
      </van-form>
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @finish="onFinish"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import Crypto from '@/utils/crypto.js'
import { getAreaInfo } from '@/api/common'
import { forgotPassword } from '@/api/register'
export default {
  name: 'login',
  data () {
    return {
      cascaderValue: '',
      options: [
        {
          text: '邯郸市',
          value: '130400',
          children: []
        }
      ],
      show: false,
      bankAccount: '', // 银行卡号
      areaId: '', // 区域id
      fieldValue: '', // 区域名称值
      idCard: '', // 身份证号
      password: '', // 密码
      passwordSure: '', // 确认密码
      phone: '', // 手机号
      userName: '', // 用户名
      pattern11: /^.{2,8}$/ // 用户名校验
    }
  },
  created () {
    this.getAreaId()
  },
  methods: {
    // 成功校验密码信息
    onSubmit () {
      this.getPassword()
    },
    // 失败校验密码信息
    onFailed () {
      this.$toast('请先将个人信息和密码填写正确！')
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish ({ selectedOptions }) {
      this.show = false
      this.areaId = this.cascaderValue
      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validatorIdCard (val) {
      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)
    },
    // 校验手机号
    validatorPhone (val) {
      return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val)
    },
    // 校验银行卡号
    validatorBankAccount (val) {
      return /^([1-9]{1})(\d{14}|\d{18})$/.test(val)
    },
    // 校验密码
    validatorPassword (val) {
      return /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/.test(val)
    },
    // 前后密码校验
    ValidatorPasswordSure () {
      return this.password === this.passwordSure
    },
    // 忘记密码再获取
    getPassword () {
      console.log('已提交')
      forgotPassword({
        areaId: this.areaId,
        bankAccount: Crypto.encrypt(this.bankAccount, this.aesKey, this.aesKeyIv),
        idCard: Crypto.encrypt(this.idCard, this.aesKey, this.aesKeyIv),
        password: Crypto.encrypt(this.password, this.aesKey, this.aesKeyIv),
        phone: this.phone,
        userName: this.userName
      }).then(res => {
        console.log(res)
        if (res.code !== 200) {
          this.$toast(res.msg)
          return
        }
        this.$toast(res.msg)
        this.$router.push('/login')
      })
    },
    // 获取区域列表
    getAreaId () {
      getAreaInfo({
        parentId: 130400
      }).then(res => {
        res.data.forEach(value => {
          this.options[0].children.push({
            text: value.label,
            value: value.id
          })
        })
      })
    },
    toLoginPage () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang="less">
.login-container{
  min-height: 100vh;
  background-color: #f8f8f8;
  .main-box{
    height: 470px;
    width: 94%;
    margin: 0 3% 10px 3%;
    padding-top: 10px;
    .person-info{
      font-size: 14px;
      padding-left: 10px;
      color: #5f93ed;
    }
    .info-box{
      margin-top: 15px;
      padding: 5px;
      border-radius: 5px;
      background-color: #fff;
    }
    .password-set{
      margin: 10px 0;
      font-size: 14px;
      padding-left: 10px;
      color: #5f93ed;
    }
    .password-box{
      border-radius: 5px;
      padding: 5px;
      background-color: #fff;
    }
    .btn-box{
      margin-top: 30px;
      text-align: center;
    }
  }
}
</style>
